<template>


  <van-form @submit="onSubmit" class="van-form">
    <van-nav-bar
      title="登录"
      left-text="返回"
      left-arrow
      @click-left="onClickLeft"
    />
   <div class="form-content">
     <van-field
       v-model="username"
       name="用户名"
       label="用户名"
       placeholder="用户名"
       :rules="[{ required: true, message: '请填写用户名' }]"
     />
     <van-field
       v-model="password"
       type="password"
       name="密码"
       label="密码"
       placeholder="密码"
       :rules="[{ required: true, message: '请填写密码' }]"
     />
     <div style="margin: 16px;">
       <van-button round block type="info" native-type="submit">提交</van-button>
     </div>
   </div>
  </van-form>

</template>

<script>
  import { Toast } from 'vant';
  export default {
    name: 'login',
    data() {
      return {
        username: '',
        password: '',
      };
    },
    methods: {

      onSubmit(values) {
        const user = {
          username: this.username,
          password: this.password,
        }
        this.$axios.post("/login",user).then( ({ data }) => {
          if (data.status === 200){
            console.log(data.user)
            console.log(data.message)
            this.$store.commit("login1", data.user);
            this.$router.push("/")
          }else {
            console.log(data)
            console.log(data.message)
          }
        })
      },
      onClickLeft() {
        this.$router.go(-1)
      },
      onClickRight() {
        Toast('按钮');
      },
    },

  };
</script>

<style>
  .van-form{
    background-color: #f7f8fa;
  }
  .van-form .form-content{
    margin-top: 30%;
  }

  /deep/ .van-ellipsis{
    color: #eaeaea;
  }
</style>
